$(function () {
  //1.  获取服务端数据渲染
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'get',
      url: '/my/article/cates',
    }).then(({ data: res }) => {
      if (res.status !== 0) return layer.msg(res.message)
      //渲染
      let arr = []
      res.data.forEach(ele => {
        arr.push(`
        <tr>
        <td>${ele.Id}</td>
        <td>${ele.name}</td>
        <td>${ele.alias}</td>
        <td>
          <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-sm " >修改</button>
          <button data-id="${ele.Id}" class="del-edit layui-btn layui-btn-sm layui-btn-danger">删除</button>
        </td>
        </tr>
        `)
      })
      $('tbody').empty().html(arr.join(''))
    })
  }

  //2.  全局变量接受open()引索值，将来关闭对话框
  let indexAdd = 0
  //点击添加按钮添加弹出弹出框
  $('#addBtn').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      title: '添加文章类别',
      area: ['500px', '260px'],
      content: `
      <form id="addForm" class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">分类别称</label>
        <div class="layui-input-block">
          <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      </form>
      `,
    })
  })

  //2.1 发送axios添加文章分类
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    //
    axios({
      method: 'post',
      url: '/my/article/addcates',
      data: $(this).serialize(),
    }).then(({ data: res }) => {
      if (res.status !== 0) return layer.msg(res.message)

      //成功提示
      layer.msg('添加成功!')
      initArtCateList()
      //关闭对话框
      layer.close(indexAdd)
    })
  })

  //3.  修改分类弹出窗
  //全局变量接受open()引索值，将来关闭对话框
  let indexEdit = 0
  //点击添加按钮添加弹出弹出框
  $('tbody').on('click', '.btn-edit', function () {
    indexEdit = layer.open({
      type: 1,
      title: '修改文章类别',
      area: ['500px', '260px'],
      content: `
        <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 隐藏域，用来填充Id值 -->
        <input type="hidden" name="Id">
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">分类别称</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
        </form>
        `,
    })
    let id = $(this).attr('data-id')
    axios({
      method: 'get',
      //  /：id 动态参数（路由参数）特点：/不能省略 :必须去掉 ，id是动态变化的
      url: '/my/article/cates/' + id,
    }).then(({ data: res }) => {
      if (res.status !== 0) return layer.msg(res.message)
      //成功渲染
      layui.form.val('editForm', res.data)
    })
  })

  //3.1   修改分类axios传值
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    //axios传参修改分类
    axios({
      method: 'post',
      url: '/my/article/updatecate',
      data: $(this).serialize(),
    }).then(({ data: res }) => {
      if (res.status !== 0) return layer.msg(res.message)
      //成功提示
      layer.msg('恭喜您，修改文章类别成功!')
      initArtCateList()
      layer.close(indexEdit)
    })
  })

  //4.  删除文章分类
  $('tbody').on('click', '.del-edit', function () {
    let id = $(this).attr('data-id')
    //弹框
    layer.confirm('确认删除吗？', { icon: 3, title: '提示' }, function (index) {
      //发送axios
      axios({
        method: 'get',
        url: '/my/article/deletecate/' + id,
      }).then(({ data: res }) => {
        if (res.status !== 0) return layer.msg(res, message)
        //成功
        layer.msg('恭喜您，删除文章分类成功!')
        initArtCateList()
      })
      layer.close(index)
    })
  })
})
